<script setup>
import { nextTick, onMounted, reactive, ref, watch } from 'vue'

import { useShowLoginDialogStore } from '@/store/showLoginDiaolg';
import { useShowRegisterDialogStore } from '@/store/showRegisterDiaolg';
import { useTokenStore } from '@/store/token';
import { useUserInfoStore } from '@/store/userInfo';
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

// token状态
const tokenStore = useTokenStore()
// 用户信息状态
const userInfoStore = useUserInfoStore()

// 显示用户登录弹框
const showLoginDialogStore = useShowLoginDialogStore()
const showLoginPanel = () => {
  showLoginDialogStore.setShowLoginDialog(true)
}

// 显示用户注册弹框
const showRegisterDialogStore = useShowRegisterDialogStore()

// 文章搜索条件
const articleTitle = ref()
// 文章搜索
const searchArticle = () => {
  // router.push(`/search/${articleTitle.value}`)
  const route = router.resolve({
    path: '/search',
    query: {
      title: articleTitle.value
    }
  })
  // 点击推荐文章时打开新页面
  window.open(route.href, '_blank');
}

// 退出登录
const logout = () => {
  // 消除掉pinia中的 token 和 userInfo
  tokenStore.removeToken()
  userInfoStore.removeUserInfo()

  // 退出登录后 刷新页面
  // window.location.reload()
  // 推出登录后，返回主页面
  router.replace("/")
}
</script>

<template>
  <div class="header" id="header">
    <!-- 版心 -->
    <div class="wrapper">
      <!-- logo -->
      <div class="logo">
        <h1>
          <router-link to="/">
            yunzhou
            <img src="../../assets/yunzhou.png">
          </router-link>
        </h1>
      </div>
      <!-- 中心部分 -->
      <div class="middle">
        <!-- nav 导航 -->
        <div class="nav">
          <ul>
            <li><router-link to="/">首页</router-link></li>
            <li><a href="">学习</a></li>
            <li><a href="">社区</a></li>
            <li><a href="">活动</a></li>
            <li><a href="/test">AI</a></li>
          </ul>
        </div>
        <!-- search 搜索 -->
        <div class="search">
          <input type="text" placeholder="云舟中徜徉~" class="search-input" v-model="articleTitle"
            @keyup.enter.native="searchArticle">
          <div class="search-btn" @click="searchArticle"><span class="iconfont icon-sousuo"
              style="font-weight: 600;"></span></div>
        </div>
      </div>
      <!-- 用户信息 -->
      <div class="user-info" v-if="tokenStore.token != ''">
        <!-- 消息 -->
        <div class="message">
          <el-dropdown>
            <span class="iconfont icon-xiaoxi"></span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>
                  <div class="dropdown-item">赞和收藏</div>
                </el-dropdown-item>
                <el-dropdown-item>
                  <div class="dropdown-item">赞和收藏</div>
                </el-dropdown-item>
                <el-dropdown-item>
                  <div class="dropdown-item">赞和收藏</div>
                </el-dropdown-item>
                <el-dropdown-item>
                  <div class="dropdown-item">赞和收藏</div>
                </el-dropdown-item>
                <el-dropdown-item>
                  <div class="dropdown-item">赞和收藏</div>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <!-- 用户头像 -->
        <div class="user-avatar">
          <el-dropdown>
            <img v-if="userInfoStore.userInfo.avatar" :src="userInfoStore.userInfo.avatar" alt="">
            <img v-else src="../../assets/default_avatar.jpg" alt="">
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item
                  @click="router.push(`/userCenter/${userInfoStore.userInfo.userId}`)">个人主页</el-dropdown-item>
                <el-dropdown-item divided @click="logout"><span style="color: red;">退出登录</span></el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <!-- 发帖 -->
        <div class="post-btn" @click="router.push(`/article/post`)">
          <span class="iconfont icon-add"></span>
          发布
        </div>
      </div>
      <!-- 登录\注册 -->
      <div class="login-register" v-if="tokenStore.token == ''">
        <button class="login-register-btn" @click.stop="showLoginPanel">
          <span>登录</span>
          <span class="btn-line"></span>
          <span>注册</span>
        </button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.header {
  height: 60px;
  background-color: #fff;
  box-shadow: 0 2px 8px #f2f3f5;
}

/* 版心 */
.header .wrapper {
  height: 100%;
  width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* logo */
.header .wrapper .logo {
  margin-right: 30px;
}

.header .wrapper .logo h1 {
  display: flex;
  /* 让图片垂直居中 */
  align-items: center;
}

.header .wrapper .logo a {
  outline: none;
  font-size: 0px;
}

.header .wrapper .logo img {
  width: 110px;
  height: 50px;
}

/* 中间部分 */
.header .wrapper .middle {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* nav 导航 */
.header .wrapper .middle .nav ul {
  display: flex;
}

.header .wrapper .middle .nav ul li a {
  display: block;
  height: 60px;
  line-height: 60px;
  padding: 0 10px;
  color: #515767;
}

.header .wrapper .middle .nav ul li a:hover {
  border-bottom: 1px solid rgb(95, 207, 39);
  color: #282b32;
}

/* search 搜索 */
.header .wrapper .middle .search {
  border-radius: 5px;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 1px;
}

.header .wrapper .middle .search:hover {
  border: 1px solid #adabab;
}

.header .wrapper .middle .search .search-input {
  width: 400px;
  height: 30px;
  padding: 10px;
  border-radius: 5px 0 0 5px;
  border: none;
  font-size: 14px;
  /* 去掉选中输入框时的黑边框 */
  outline: none;
}

.header .wrapper .middle .search .search-btn {
  background-color: #f2f3f5;
  border-radius: 4px;
  width: 44px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}


/* 用户信息 */
.header .wrapper .user-info {
  display: flex;
  align-items: center;
}

.header .wrapper .user-info .message {
  padding: 0 5px;
}

.header .wrapper .user-info .message .icon-xiaoxi {
  font-size: 30px;
  color: #8a919f;
  cursor: pointer;
  /* 在给el-dropdown-menu里自己写的内容最外层加outline:none就可以去掉黑色边框 */
  outline: none;
}

.header .wrapper .user-info .message .icon-xiaoxi:hover {
  color: #4c4b4b;
}

.dropdown-item {
  width: 130px;
}


/* 用户头像 */
.header .wrapper .user-info .user-avatar {
  width: 36px;
  height: 36px;
  margin-left: 5px;
  margin-right: 15px;
}

.header .wrapper .user-info .user-avatar :deep(.el-dropdown) {
  width: 36px;
  height: 36px;
}

.header .wrapper .user-info .user-avatar :deep(.el-tooltip__trigger:focus) {
  outline: none;
}

.header .wrapper .user-info .user-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: contain;
  outline: none;
}

/* 登录\注册 */
.header .wrapper .login-register {
  margin-left: 20px;
  border-radius: 5px;
  border: 1px solid rgb(179, 224.5, 156.5);
}

.header .wrapper .login-register .login-register-btn {
  padding: 5px 10px;
  background-color: rgb(239.8, 248.9, 235.3);
  width: 90px;
  height: 35px;
  font-size: 14px;
  font-weight: 400;
  border: 0;
  cursor: pointer;
  color: rgb(68, 135, 35);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 发帖按钮 */
.header .wrapper .user-info .post-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(15, 173, 15);
  height: 35px;
  border-radius: 20px;
  padding: 0 15px;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.header .wrapper .user-info .post-btn .icon-add {
  padding-right: 5px;
}
</style>